<template>
  请输入书籍关键字：
  <input type="text" v-model="mytext" /><p></p>
  查询结果：
  <ul>
      <li v-for="(item, index) in list" :key="index">
          {{ item }}
      </li>
  </ul>
</template>

<script>
import { ref } from '@vue/reactivity'
import { onMounted, watch } from '@vue/runtime-core'
export default {
    setup () {
        const mytext = ref('')
        const list = ref([])
        const caschList = []
        watch(mytext, () => {
            console.log(mytext.value)
            list.value = caschList.value.filter(item => item.includes(mytext.value))
        })

        onMounted(() => {
            fetch('/class4/test4-5.json')
            .then(res=>res.json())
            .then(res=>{
                list.value = res.list
                caschList.value = res.list
            })
        })

        return {
            mytext,
            list
        }
    }
}
</script>

<style>

</style>